<html>

	<head>
		<title>卖车</title>
		<meta http-equiv="content-type" content="txt/html; charset=utf-8" />
		<meta http-equiv="Access-Control-Allow-Origin" content="*" />
		<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
		<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
	</head>
	<style type="text/css">
		.shopcar-ul {
			padding: 0 0.8rem;
			box-sizing: border-box;
			text-align: justify;
		}
		
		.shopcar-ul li {
			float: left;
			line-height: 1.333333rem;
			height: 1.333333rem;
			width: auto;
			margin: 0 0.126666rem;
			font-size: 0.313333rem;
		}
		
		.shopcar-ul li span {
			width: 0.333333rem;
			height: 0.333333rem;
			border-radius: 50%;
			text-align: center;
			line-height: 0.333333rem;
			border: 1px solid #333;
			box-sizing: border-box;
			display: inline-block;
		}
		
		.shopcar-ul li .topactive {
			border: 1px solid #171C61 !important;
			color: #171C61 !important;
		}
		
		.shopcar-ul li img {
			width: 0.4rem;
			margin-top: 0.506666rem;
		}
		
		.clearfix::after,
		.clearfxi::before {
			content: "";
			display: block;
			visibility: hidden;
			height: 0;
			line-height: 0;
			clear: both;
		}
		
		.shopcar-upimg {
			height: 0.6rem;
			line-height: 0.6rem;
			font-size: 0.466666rem;
			color: #666666;
			padding: 0.15rem 0.333333rem;
			background: #f3f3f3;
		}
		
		.shopcar-upimg div {
			border-left: 0.08rem solid #171C61;
			padding: 0 15px;
			box-sizing: border-box;
		}
		
		.shopcar-upimglist {
			padding: 0 0 0.533333rem 0;
			width: 9.333333rem;
			font-size: 0.4rem;
			margin: 0 auto;
			box-sizing: border-box;
			border-bottom: 1px solid #f3f3f3;
		}
		
		.shopcar-upimglist .shopcar-blue {
			line-height: 1.2rem;
		}
		
		.center {
			text-align: center;
		}
		
		.shopcar-addimg {
			width: 2rem;
			border-radius: 0.133333rem;
		}
		
		#addImgBox>span {
			width: 2rem;
			height: 2rem;
			border-radius: 0.133333rem;
			overflow: hidden;
			margin: 0rem 0.333rem 0.333rem 0;
			background-size: cover;
			background-position: center center;
			background-repeat: no-repeat;
			display: inline-block;
		}
		
		.shopcar-red {
			color: red;
		}
		
		.shopcar-newsbox {
			padding: 0 0.333333rem;
		}
		
		.shopcar-list {
			height: 0.8rem;
			line-height: 0.8rem;
			padding: 0.4rem 10px;
			border-bottom: 0.013333rem solid #f3f3f3;
			font-size: 0.4rem;
		}
		
		.shopcar-list label {
			font-size: 0.4rem;
		}
		
		.fr {
			float: right;
		}
		
		.fl {
			float: left;
		}
		
		.shopcar-newsinp {
			border: none;
			height: 0.8rem;
			line-height: 0.8rem;
			text-align: right;
		}
		
		select {
			border: none;
			outline: none;
			appearance: none;
			-webkit-appearance: none;
			-moz-appearance: none;
			text-align: right;
		}
		
		.shopcar-newsinp option {
			text-align: right;
			font-size: 0.5rem !important;
		}
		
		.content-img-list-item,
		.content-img-list-item_shouche,
		.content-img-list-item_dengji,
		.content-img-list-item_jiaoqiang,
		.content-img-list-item_shangye {
			display: inline-block;
			float: left;
			width: 2rem;
			height: 2rem;
			border-radius: 0.133333rem;
			overflow: hidden;
			margin-right: 0.3333rem;
			margin-bottom: 0.333rem;
		}
		
		.content-img-list-item img,
		.content-img-list-item_shouche img,
		.content-img-list-item_dengji img,
		.content-img-list-item_jiaoqiang img,
		.content-img-list-item_shangye img {
			width: 3.666666rem;
		}
		/*车主档案*/
		
		.shopcar-idcardimg {
			width: 3.733333rem;
			height: 2.266666rem;
			border-radius: 0.266666rem;
			margin:0 auto;
		}
		
		.shopcar-idcardtil {
			margin: 0.866666rem 0 0.4rem 0;
			font-size: 0.28rem;
			color: #9F0000;
			line-height: 0.333333rem;
		}
		
		.shopcar-idcardtil .span {
			margin-left: 1.233333rem;
			margin-right: 0.2rem;
			width: 0.333333rem;
			height: 0.333333rem;
			border-radius: 50%;
			box-sizing: border-box;
			border: 0.013333rem solid #9F0000;
			color: ##9F0000;
			text-align: center;
			line-height: 0.333333rem;
			float: left;
		}
		.content-img-list_idcard {
			width: 8rem;
			margin: 00 auto;
		}
		.content-img-list_idcard li:first-child {
			float: left;
		}
		.content-img-list_idcard li:nth-child(2) {
			float: right;
		}
		/*备注*/
		
		.shopcar-note {
			padding: 0.266666rem;
			background: #f6f6f6;
			font-size: 0.4rem;
			line-height: 0.533333rem;
			width: 9.333333rem;
			height: 2.133333rem;
			overflow: auto;
			border-radius: 0.2rem;
			display: block;
			margin: 0.666666rem auto;
			border: none;
		}
		/*协议*/
		
		.shopcar-agreement {
			padding: 0 0.333333rem;
		}
		
		.shopcar-blue {
			color: #171C61;
		}
		/*立即提交*/
		
		.shopcar-upbtn {
			width: 9.333333rem;
			height: 1.133333rem;
			line-height: 1.133333rem;
			color: #fff;
			text-align: center;
			background: #171C61;
			border-radius: 0.266666rem;
			margin: 1rem auto;
			display: block;
			font-size: 0.506666rem;
		}
		
		.shopcar-checked {
			width: 0.4rem;
			height: 0.4rem;
			margin-right: 0.266666rem;
		}
		
		.close {
			position: absolute;
			z-index: 999;
			margin-left: 1.5rem;
			width: 40px;
			height: 40px;
			border-radius: 20px;
			text-align: center;
			color: #fff;
			line-height: 40px;
			background: #000;
		}
		.mg_l {
			margin-left: 3.2rem;
		}
	</style>

	<body>
		<!--进程-->
		<div class="clearfix" id="">
			<ul class="shopcar-ul">
				<li class="shopcar-blue "><span class="topactive">1</span>上传图片</li>
				<li><img src="./images/shopcarright-active.png" /></li>
				<li><span class="">2</span>填写信息</li>
				<li><img src="./images/shopcarright.png" /></li>
				<li><span class="">3</span>点击提交并交保证金</li>
			</ul>
		</div>
		<form id="apply-for-help-form" method="post" action="" onsubmit="return false;">
			<!--up img-->
			<div id="">
				<div class="shopcar-upimg" id="">
					<div id="">上传证件照片</div>
				</div>

				<p class="center shopcar-idcardtil clearfix">

					<span id="" class="span">!</span>
					<span class="fl" id="">我们不会通过任何渠道泄露您的个人信息请放心上传</span>
				</p>

				<div id="" class="shopcar-upimglist">
					<div class="shopcar-blue">车辆外观图 <span class="shopcar-red"> *</span></div>
					<div id="addImgBox" class="clearfix ">
						<ul class="content-img-list">
						</ul>
						<span id="" class="fl">
							<img class="shopcar-addimg ico-plus" id="sfz_12" onclick="$('#upload').click()" src="./images/addimg.png" title="点击上传图片">
						</span>
						<input type="file" name="file" accept="image/*" id="upload" style="display:none">
					</div>
				</div>

				<div id="" class="shopcar-upimglist">
					<div class="shopcar-blue">售车行驶证 <span class="shopcar-red"> *</span></div>
					<div id="addImgBox" class="clearfix ">

						<ul class="content-img-list_shouche">
						</ul>
						<span id="" class="fl">
							<img class="shopcar-addimg ico-plus_shouche" id="sfz_12_shouche" onclick="$('#upload_shouche').click()" src="./images/addimg.png" title="点击上传图片">
						</span>
						<input type="file" name="file_shouche" accept="image/*" id="upload_shouche" style="display:none">
					</div>
				</div>

				<div id="" class="shopcar-upimglist">
					<div class="shopcar-blue">机动车登记证 <span class="shopcar-red"> *</span></div>
					<div id="addImgBox" class="clearfix ">
						<ul class="content-img-list_dengji">
						</ul>
						<span id="" class="fl">
							<img class="shopcar-addimg ico-plus_dengji" id="sfz_12_dengji" onclick="$('#upload_dengji').click()" src="./images/addimg.png" title="点击上传图片">
						</span>
						<input type="file" name="file_dengji" accept="image/*" id="upload_dengji" style="display:none">
					</div>
				</div>

				<div id="" class="shopcar-upimglist">
					<div class="shopcar-blue">交强保险单 <span class="shopcar-red"> *</span></div>
					<div id="addImgBox" class="clearfix ">
						<ul class="content-img-list_jiaoqiang">
						</ul>
						<span id="" class="fl">
							<img class="shopcar-addimg ico-plus_jiaoqiang" id="sfz_12_jiaoqiang" onclick="$('#upload_jiaoqiang').click()" src="./images/addimg.png" title="点击上传图片">
						</span>
						<input type="file" name="file_jiaoqiang" accept="image/*" id="upload_jiaoqiang" style="display:none">
					</div>
				</div>

				<div id="" class="shopcar-upimglist">
					<div class="shopcar-blue">商业保险单 <span class="shopcar-red"> *</span></div>
					<div id="addImgBox" class="clearfix ">
						<ul class="content-img-list_shangye">
						</ul>
						<span id="" class="fl">
							<img class="shopcar-addimg ico-plus_shangye" id="sfz_12_shangye" onclick="$('#upload_shangye').click()" src="./images/addimg.png" title="点击上传图片">
						</span>
						<input type="file" name="file_shangye" accept="image/*" id="upload_shangye" style="display:none">
					</div>
				</div>

			</div>
			<!--车辆信息-->
			<div id="">
				<div class="shopcar-upimg" id="">
					<div id="">
						车辆信息
					</div>
				</div>
				<div id="" class="shopcar-newsbox">
					<div id="" class="shopcar-list">
						<lable class="shopcar-blue">品牌 <span class="shopcar-red">*</span></lable>
						<!--<input class="shopcar-newsinp fr" type="" name="brand" id="" value="" placeholder="请选择品牌" />-->
						<select name="brand" class="shopcar-newsinp fr">
							<option value="请选择品牌">请选择品牌</option>
							<option value="奔驰【进口】">奔驰【进口】</option>
							<option value="宝马【进口】">宝马【进口】</option>
							<option value="劳斯莱斯">劳斯莱斯</option>
							<option value="布加迪威龙">布加迪威龙</option>
						</select>
					</div>
					<div id="" class="shopcar-list">
						<lable class="shopcar-blue">车系 <span class="shopcar-red">*</span></lable>
						<input class="shopcar-newsinp fr" type="" name="cars" id="" value="" placeholder="请输入车系" />
					</div>
					<div id="" class="shopcar-list">
						<lable class="shopcar-blue">车型 <span class="shopcar-red">*</span></lable>
						<input class="shopcar-newsinp fr" type="" name="models" id="" value="" placeholder="请输入车型" />
					</div>
					<div id="" class="shopcar-list">
						<lable class="shopcar-blue">颜色 <span class="shopcar-red">*</span></lable>
						<input class="shopcar-newsinp fr" type="" name="color" id="" value="" placeholder="请输入颜色" />
					</div>
					<div id="" class="shopcar-list">
						<lable class="shopcar-blue">公里数 <span class="shopcar-red">*</span></lable>
						<input class="shopcar-newsinp fr" type="" name="km" id="" value="" placeholder="请输入公里数" />
					</div>
					<div id="" class="shopcar-list">
						<lable class="shopcar-blue">意向价 <span class="shopcar-red">*</span></lable>
						<input class="shopcar-newsinp fr" type="" name="intention" id="" value="" placeholder="请输入意向价" />
					</div>
					<div id="" class="shopcar-list">
						<lable class="shopcar-blue">保证金 <span class="shopcar-red">*</span></lable>
						<input class="shopcar-newsinp fr shopcar-blue" type="" name="margin" id="" value="￥200.00" placeholder="" />
					</div>
				</div>
			</div>
			<!--车主档案-->
			<div id="">
				<div class="shopcar-upimg" id="">
					<div id="">
						车主档案
					</div>
				</div>
				<div id="" class="shopcar-newsbox">
					<div id="" class="shopcar-list">
						<lable class="shopcar-blue">手机号 <span class="shopcar-red">*</span></lable>
						<input class="shopcar-newsinp fr" type="" name="telnum" id="" value="" placeholder="请输入手机号" />
					</div>
					<div id="" class="shopcar-list">
						<lable class="shopcar-blue">身份证号 <span class="shopcar-red">*</span></lable>
						<input class="shopcar-newsinp fr" type="" name="idcard" id="" value="" placeholder="请输入身份证号" />
					</div>
					<div id="">
						<p class="center shopcar-idcardtil clearfix">
							<!--<img class="fl" src="./images/waring.png" />-->
							<span id="" class="span">!</span>
							<span class="fl" id="">为确保信息准确性，请上传清晰身份证正反面证件照</span>
						</p>
						<div id="" class="center">
							<div id="" class="shopcar-upimglist">								
								<div id="addImgIdcard" class="clearfix ">
									<ul class="content-img-list_idcard clearfix"></ul>
									<img class="shopcar-addimg ico-plus_idcard shopcar-idcardimg" id="sfz_12_idcard" onclick="$('#upload_idcard').click()" src="./images/makephoto.png" title="点击上传图片">
									<input type="file" name="file_idcard" accept="image/*" id="upload_idcard" style="display:none">
								</div>
							</div>

						</div>
					</div>
				</div>
			</div>
			<!--备注-->
			<div id="">
				<textarea class="shopcar-note" name="note" rows="" cols="" placeholder="备注"></textarea>
			</div>
			<!--协议-->
			<div id="" class="shopcar-agreement">
				<div id="" class="">
					<input class="shopcar-checked fl" type="checkbox" name="vehicle" value="Car" checked="checked" /> 阅读并同意
					<span class="shopcar-blue">《二手车售卖协议》</span>
				</div>
			</div>
			<input class="shopcar-upbtn" type="submit" name="" id="shopcarsubmit" value="立即提交" />
		</form>
	</body>
	<script type="text/javascript" src="shop_car.js"></script>
	<script type="text/javascript" src="shouche.js"></script>
	<script type="text/javascript" src="dengji.js"></script>
	<script type="text/javascript" src="jiaoqiang.js"></script>
	<script type="text/javascript" src="shangye.js"></script>
	<script type="text/javascript" src="idcard.js"></script>

	<script type="text/javascript">
		//		$("#apply-for-help-form").submit(function() {
		//			console.log($("#apply-for-help-form"))
		//			if(!isV2gogoApp()) {
		//				$(".apply-for-help").hide();
		//				showDownloadAPPColorbox();
		//			} else {
		//				var noError = true;
		//				var errorLables = $("label");
		//				for(var i = 0; i < errorLables.length; i++) {
		//					if(errorLables[i].innerText != "") {
		//						noError = false;
		//					}
		//				}
		//				if(noError == true) {
		//					submitApplyForHelpForm(serverPrefix + "", id);
		//				}
		//				return false;
		//			}
		//		});
		//		// 车辆外观图
		//		$('#sfz_1').on('change', function() { //当 input file 已经选中时触发js
		//			console.log("gang jin lai")
		//			var formData = new FormData(); //先实例化formdata
		//			console.log(formData);
		//			var files = this.files; //获取文件名
		//
		//			$("#addImg").append("");
		//			for(var i = 0; i < files.length; i++) {
		//				$("#addImgBox").append('<span id="addImg' + i + '" class="add-img-list fl"><img class="shopcar-addimg" id = "img' + i + '" / ></span>');
		//				$("#addImg" + i).append("<span class='close' id='deleteAddimg' onclick='deleteAddImg(addImg"+ i +")'>X</span")
		//				$("#addImg" + i).css("background-image", "url(" + window.URL.createObjectURL(files[i]) + ")")
		//				//				$("#img" + i).attr("src",window.URL.createObjectURL(files[i]))		
		//			}
		//
		//			var id = this.id; //本input的id
		//			var url = "https://fuzhuang.sjwke.com/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=mmanage.util.uploader";
		//			//				'https://fuzhuang.sjwke.com/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=mmanage.util.uploaderurl'; //接受处理本JS方法的路径\n
		//
		//			formData.append("sfz", files); //append方法用于向formdata中注入内容
		//			//			console.log(formData)
		//			$.ajax({
		//				type: "post",
		//				url: url,
		//				//async:false,
		//				contentType: false,
		//				processData: false,
		//				data: formData, //传过来
		//				//				dataType: 'jsonp',
		//				//				jsonp: "jsonpCallback",
		//				xhrFields: {
		//					withCredentials: true
		//				},
		//				success: function(data) {
		//					console.log(data)
		//					//					$('#' + id + "1").val(data.url); //在隐藏的hidden中返回文件的路径
		//					//					$('#' + id + "2").attr('src', data.url); //改变当前的显示图片
		//
		//				},
		//				fail: function(data) {
		//					console.log(data);
		//				}
		//			});
		//		})
		//
		//		function jsonpCallback(a) {
		//			console.log(a)
		//			console.log('///////')
		//		}
		//		//点击删除
		//		function deleteAddImg (de){
		//			console.log(de)
		//			de.remove()
		//		}
	</script>

</html>